<!--
 * @Author: 曹曙光
 * @Date: 2023-03-16 23:07:33
 * @LastEditors: 曹曙光
 * @LastEditTime: 2023-03-18 12:29:51
 * @FilePath: \learnmoreecharts\src\components\echartList\echartItem.vue
 * @Description: 
 * 
-->


<template>
    <div id="main" :style="{ height: height, width: width }">sssss</div>
</template>

<script>
import * as echarts from "echarts"
export default {
    props: {
        width: {
            type: String,
            required: false,
            default: '400px'
        },
        height: {
            type: String,
            required: false,
            default: '400px'
        },
        title: {
            type: String,
            required: false,
            default: '默认标题'
        },
        cdata: {
            type: Array,
            required: true,
        },
        legend: {
            type:[] ,
            reuqired: false,
            default: ''
        },
        types:{
            type:String,
            required:false,
            default:"line"
        }
    },
    data() {
        return {

        }
    },
    onload() {

    },
    mounted() {
        var myechart = echarts.init(document.getElementById('main'))
        console.log("🚀 ~ file: echartItem.vue:60 ~ mounted ~ myechart:", myechart)

        myechart.setOption({
            brush:{
                // -使用工具栏中的矩形选择功能
                    toolbox:['rect']
                },
            toolbox:{
                // -功能
                feature :{
                    // -保存为图片
                    saveAsImage:{},
                    // -缩放
                    dataZoom:{},
                    // -还原
                    restore:{},
                    // -数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
                    dataView :{},
                    // -动态类型切换
                    magicType:{
                        type: ['line', 'bar', 'stack']
                    },
                    // -数据选择功能
                    brush:{
                        type:['rect']
                    },
                    
                },
      
            },
            // -区域缩放
            dataZoom:[{},{
                type:'inside'
            }],
            // -视觉映射 颜色根据值进行映射
            visualMap:{
                // -颜色的修改
                // inRange :{
                //     color:['red','blue','green']
                // }
            },
            title: {
                text: this.title
            },
            legend: {
                data: this.legend
            },
            tooltip: {},
            xAxis: {
                // 动态x轴数据
                data: this.cdata[0].name
            },
            yAxis: {},
            series: [
                {
                    // 动态图表项名称
                    name: this.legend[0],
                    type: this.types,
                    data: this.cdata[1].data
                }
            ]
        })
    }
}
</script>
<style lang="scss" scoped></style>